<template>
    <div class="app-container" style="padding: 5px;">
        <el-row>
            <el-col :span="12">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">公司年度目标</span>
                    </div>
                    <el-row>
                        <el-col :span="8">
                            <center>
                                <table>
                                    <tr><td align="center"><span style="font-size: 30px;font-weight: bold;">{{ company.target }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-coin" style="color:orange;font-size:20px;margin-top: 10px;">目标(万元)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                        <el-col :span="8">
                            <center>
                                <table>
                                    <tr><td align="center"><span style="font-size: 30px;font-weight: bold;">{{ company.finished }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-coin" style="color:green;font-size:20px;margin-top: 10px;">出库达成(万元)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                        <el-col :span="8">
                            <center>
                                <table>
                                    <tr><td align="center"><span style="font-size: 30px;font-weight: bold;">{{ company.rate }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-finished" style="color:red;font-size:20px;margin-top: 10px;">达成率(%)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="margin-left: 5px;">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售部年度目标</span>
                    </div>
                    <el-row>
                        <el-col :span="5">
                            <center>
                                <table>
                                    <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ sdept.target }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-coin" style="color:orange;font-size:16px;margin-top: 10px;">目标(万元)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                        <el-col :span="5">
                            <center>
                                <table>
                                    <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ sdept.finished }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-coin" style="color:green;font-size:16px;margin-top: 10px;">出库达成(万元)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                        <el-col :span="5">
                            <center>
                                <table style="margin-top: 5px;">
                                    <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ sdept.rate }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-finished" style="color:red;font-size:16px;margin-top: 10px;">出库达成率(%)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                        <el-col :span="5">
                            <center>
                                <table>
                                    <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ sdept.htfinished }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-coin" style="color:green;font-size:16px;margin-top: 10px;">接单达成(万元)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                        <el-col :span="4">
                            <center>
                                <table style="margin-top: 5px;">
                                    <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ sdept.htrate }}</span></td></tr>
                                    <tr><td align="center">
                                        <i class="el-icon-finished" style="color:red;font-size:16px;margin-top: 10px;">接单达成率(%)</i>
                                    </td></tr>
                                </table>
                            </center>
                        </el-col>
                    </el-row>
                    <div style="height:5px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <el-card style="margin-top: 5px;">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售部各月接单走势</span>
                    </div>
                    <div ref="chart1" style="width: 100%;height:400px;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="margin-left: 5px;margin-top: 5px;">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售部各月接单目标完成走势</span>
                    </div>
                    <div ref="chart2" style="width: 100%;height:400px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售部各月接单目标完成明细</span>
            </div>
            <el-table :data="deptmonthtable" border stripe >
                <el-table-column label="月份" align="center" prop="month"></el-table-column>
                <el-table-column label="接单达成" align="center" prop="htfinished">
                    <template slot-scope="scope">
                      <span style="color:red">{{ scope.row.htfinished }}万元</span>
                    </template>
                </el-table-column>
                <el-table-column label="保底目标" align="center" prop="target">
                    <template slot-scope="scope">
                        {{ scope.row.target }}万元
                    </template>
                </el-table-column>
                <el-table-column label="冲刺目标" align="center" prop="target">
                    <template slot-scope="scope">
                      <span style="color:orange">{{ scope.row.cctarget }}万元</span>
                    </template>
                </el-table-column>
                <el-table-column label="保底达成率" align="center" prop="htrate">
                    <template slot-scope="scope">
                        {{ scope.row.htrate }}%
                    </template>
                </el-table-column>
                <el-table-column label="冲刺达成率" align="center" prop="htrate">
                    <template slot-scope="scope">
                        {{ scope.row.ccrate }}%
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区年度接单走势</span>
            </div>
            <div ref="chartay" style="width: 100%;height:400px;"></div>
        </el-card>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区年度接单目标完成明细</span>
            </div>
            <el-table :data="areayeartable" border stripe >
                <el-table-column label="片区" align="center" prop="area"></el-table-column>
                <el-table-column label="接单达成" align="center" prop="htfinished">
                    <template slot-scope="scope">
                      <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                    </template>
                </el-table-column>
                <el-table-column label="保底目标" align="center" prop="target">
                    <template slot-scope="scope">
                        {{ scope.row.target }}万元
                    </template>
                </el-table-column>
                <el-table-column label="冲刺目标" align="center" prop="cctarget">
                    <template slot-scope="scope">
                      <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                    </template>
                </el-table-column>
                <el-table-column label="保底达成率" align="center" prop="htrate">
                    <template slot-scope="scope">
                        {{ scope.row.htrate }}%
                    </template>
                </el-table-column>
                <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                    <template slot-scope="scope">
                        {{ scope.row.ccrate }}%
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区月目标完成情况</span>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="晋宁片区" name="first">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartjn1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartjn2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="jnt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="宜良片区" name="second">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartyl1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartyl2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="ylt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="呈贡片区" name="third">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartcg1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartcg2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="cgt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="嵩明片区" name="fourth">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartsm1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartsm2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="smt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="安宁片区" name="fifth">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartan1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartan2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="ant" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="玉溪片区" name="sixth">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartyx1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartyx2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="yxt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="石林片区" name="seventh">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartsl1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartsl2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="slt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="楚雄片区" name="eightth">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartcx1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartcx2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="cxt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="省外" name="nineth">
                    <el-row>
                        <el-col :span="12">
                            <el-card style="margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">各月接单情况</span>
                                </div>
                                <div ref="chartsw1" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card style="margin-left: 5px;margin-top: 5px;">
                                <div slot="header" class="clearfix">
                                    <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单目标完成情况</span>
                                </div>
                                <div ref="chartsw2" style="width: 100%;height:400px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-table :data="swt" border stripe style="margin-top: 5px;">
                        <el-table-column label="月份" align="center" prop="month"></el-table-column>
                        <el-table-column label="接单达成" align="center" prop="htfinished">
                            <template slot-scope="scope">
                              <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底目标" align="center" prop="target">
                            <template slot-scope="scope">
                                {{ scope.row.target }}万元
                            </template>
                        </el-table-column>
                        <el-table-column label="冲刺目标" align="center" prop="cctarget">
                            <template slot-scope="scope">
                              <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="保底达成率" align="center" prop="htrate">
                          <template slot-scope="scope">
                            {{ scope.row.htrate }}%
                          </template>
                        </el-table-column>
                        <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                          <template slot-scope="scope">
                            {{ scope.row.ccrate }}%
                          </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售部年度产品聚焦</span>
            </div>
            <el-row>
                <el-col :span="12">
                    <div ref="chart2yearcp" style="width: 100%;height:600px;"></div>
                </el-col>
                <el-col :span="12">
                    <el-row>
                        <el-col :span="24">
                            <div ref="chart2yearzcm" style="width: 100%;height:300px;"></div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div ref="chart2yearqt" style="width: 100%;height:300px;"></div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>

        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">销售部月度产品聚焦</span>
            </div>
            <el-tabs v-model="activeName1" @tab-click="handleClick1" style="margin-top: -15px;">
                <el-tab-pane v-for="(item,index) in dicts" :key="'xsb'+index" :label="item.label" :name="item.value">
                    <el-row>
                        <el-col :span="12">
                            <div :id="'div1'+index" style="width: 100%;height:600px;"></div>
                        </el-col>
                        <el-col :span="12">
                            <el-row>
                                <el-col :span="24">
                                    <div :id="'div2'+index" style="width: 100%;height:300px;"></div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div :id="'div3'+index" style="width: 100%;height:300px;"></div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区年度产品聚焦</span>
            </div>
            <el-tabs v-model="activeName2" @tab-click="handleClick2" style="margin-top: -15px;">
                <el-tab-pane v-for="(item,index) in dicts2" :key="'h'+index" :label="item.label" :name="item.value">
                    <el-row>
                        <el-col :span="12">
                            <div :id="'areayear1'+index" style="width: 100%;height:600px;"></div>
                        </el-col>
                        <el-col :span="12">
                            <el-row>
                                <el-col :span="24">
                                    <div :id="'areayear2'+index" style="width: 100%;height:300px;"></div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div :id="'areayear3'+index" style="width: 100%;height:300px;"></div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区月度产品聚焦</span>
            </div>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="top">
                <el-form-item label="片区" prop="dpt">
                    <el-select v-model="queryParams.dpt" filterable @change="handleChange">
                        <el-option v-for="item in areadicts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="月份" prop="month">
                    <el-select v-model="queryParams.month" filterable @change="handleChange">
                        <el-option v-for="item in monthdicts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col :span="12">
                    <div id="areamonth1" style="width: 100%;height:600px;"></div>
                </el-col>
                <el-col :span="12">
                    <el-row>
                        <el-col :span="24">
                            <div id="areamonth2" style="width: 100%;height:300px;"></div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div id="areamonth3" style="width: 100%;height:300px;"></div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import { listComDeptTarget,listAreasTarget,listAreaYearTarget,listYearProduct,listXsbMonths,listMonthProductData } from "@/api/system/sales/dpt/api";
import { listAreaYearData,listAreaYearProductData,listAreaMonths,listAreaMonthsInfo,listAreaMonthsDataInfo } from "@/api/system/sales/dpt/api";
import * as echarts from 'echarts';
export default {
    name: "Xsbsjbk",
    data() {
        return {
            queryParams: {
                dpt: null,
                month: null,
            },
            areadicts: [],
            monthdicts: [],
            dicts: [],
            dicts2: [],
            company: {},
            sdept: {},
            deptmonthtable: [],
            activeName: 'first',
            activeName1: null,
            activeName2: null,
            areamonthtable: [],
            areayeartable: [],
            jnt: [],
            ylt: [],
            cgt: [],
            smt: [],
            ant: [],
            yxt: [],
            slt: [],
            cxt: [],
            swt: [],
        }
    },
    created() {
        this.getComDeptTarget();
        this.getAreaYearTarget();
        this.getAreaTarget();
        this.getYearProduct();
        this.getMonthProduct();
        this.getAreaYearData();
        this.getAreaMonthData();
    },
    mounted(){

    },
    methods: {
        handleChange(){
            this.getAreaMonthsDataInfo();
        },
        handleClick2(tab, event) {
            this.getAreaYearProduct(tab._props.name,tab.index);
        },
        handleClick1(tab, event) {
            this.getMonthProductData(tab._props.name,tab.index);
        },
        handleClick(tab, event) {
            if(tab.index==1){
                const chartyl1 = echarts.init(this.$refs.chartyl1);
                this.$nextTick(() => {
                    chartyl1 && chartyl1.resize();
                });
                const chartyl2 = echarts.init(this.$refs.chartyl2);
                this.$nextTick(() => {
                    chartyl2 && chartyl2.resize();
                });
            }else if(tab.index==2){
                const chartcg1 = echarts.init(this.$refs.chartcg1);
                this.$nextTick(() => {
                    chartcg1 && chartcg1.resize();
                });
                const chartcg2 = echarts.init(this.$refs.chartcg2);
                this.$nextTick(() => {
                    chartcg2 && chartcg2.resize();
                });
            }else if(tab.index==3){
                const chartsm1 = echarts.init(this.$refs.chartsm1);
                this.$nextTick(() => {
                    chartsm1 && chartsm1.resize();
                });
                const chartsm2 = echarts.init(this.$refs.chartsm2);
                this.$nextTick(() => {
                    chartsm2 && chartsm2.resize();
                });
            }else if(tab.index==4){
                const chartan1 = echarts.init(this.$refs.chartan1);
                this.$nextTick(() => {
                    chartan1 && chartan1.resize();
                });
                const chartan2 = echarts.init(this.$refs.chartan2);
                this.$nextTick(() => {
                    chartan2 && chartan2.resize();
                });
            }else if(tab.index==5){
                const chartyx1 = echarts.init(this.$refs.chartyx1);
                this.$nextTick(() => {
                    chartyx1 && chartyx1.resize();
                });
                const chartyx2 = echarts.init(this.$refs.chartyx2);
                this.$nextTick(() => {
                    chartyx2 && chartyx2.resize();
                });
            }else if(tab.index==6){
                const chartsl1 = echarts.init(this.$refs.chartsl1);
                this.$nextTick(() => {
                    chartsl1 && chartsl1.resize();
                });
                const chartsl2 = echarts.init(this.$refs.chartsl2);
                this.$nextTick(() => {
                    chartsl2 && chartsl2.resize();
                });
            }else if(tab.index==7){
                const chartcx1 = echarts.init(this.$refs.chartcx1);
                this.$nextTick(() => {
                    chartcx1 && chartcx1.resize();
                });
                const chartcx2 = echarts.init(this.$refs.chartcx2);
                this.$nextTick(() => {
                    chartcx2 && chartcx2.resize();
                });
            }else if(tab.index==8){
                const chartsw1 = echarts.init(this.$refs.chartsw1);
                this.$nextTick(() => {
                    chartsw1 && chartsw1.resize();
                });
                const chartsw2 = echarts.init(this.$refs.chartsw2);
                this.$nextTick(() => {
                    chartsw2 && chartsw2.resize();
                });
            }
        },
        getAreaMonthData(){
            listAreaMonths().then(res =>{
                this.areadicts = res.data.areas;
                this.monthdicts = res.data.months;
                this.queryParams.dpt = res.data.area;
                this.queryParams.month = res.data.month;
                this.getAreaMonthsDataInfo();
            })
        },
        getAreaMonthsDataInfo(){
            listAreaMonthsDataInfo(this.queryParams).then(res =>{
                let labelsb = [];
                if(res.data.brand.length>0){
                    for(let i=0;i<res.data.brand.length;i++){
                        labelsb.push(res.data.brand[i].brand)
                    }
                }

                const chartd1 = echarts.init(document.getElementById("areamonth1"));
                const option1 = {
                    title: {
                        text: '一级品类-接单情况',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsb,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.brand.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株<br/>成交单数："+item.orders+"单"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.bcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd1.setOption(option1);

                const chartd2 = echarts.init(document.getElementById("areamonth2"));
                let labelsz = [];
                if(res.data.zcm.length>0){
                    for(let i=0;i<res.data.zcm.length;i++){
                        labelsz.push(res.data.zcm[i].brand)
                    }
                }

                const option2 = {
                    title: {
                        text: '自产苗-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsz,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.zcm.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.zcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd2.setOption(option2);

                const chartd3 = echarts.init(document.getElementById("areamonth3"));
                let labelsq = [];
                if(res.data.qt.length>0){
                    for(let i=0;i<res.data.qt.length;i++){
                        labelsq.push(res.data.qt[i].brand)
                    }
                }
                const option3 = {
                    title: {
                        text: '其他-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsq,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.qt.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.qcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd3.setOption(option3);
            })
        },
        getAreaYearData(){
            listAreaYearData().then(res =>{
                this.dicts2 = res.data.areas;
                this.activeName2 = res.data.areas[0].value;
                this.getAreaYearProduct(res.data.areas[0].value,0);
            })
        },
        getAreaYearProduct(area,index){
            let data = {
                dpt: area
            }
            listAreaYearProductData(data).then(res =>{
                let labelsb = [];
                if(res.data.brand.length>0){
                    for(let i=0;i<res.data.brand.length;i++){
                        labelsb.push(res.data.brand[i].brand)
                    }
                }

                const chartd1 = echarts.init(document.getElementById("areayear1"+index));
                const option1 = {
                    title: {
                        text: '一级品类-接单情况',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsb,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.brand.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株<br/>成交单数："+item.orders+"单"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.bcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd1.setOption(option1);

                const chartd2 = echarts.init(document.getElementById("areayear2"+index));
                let labelsz = [];
                if(res.data.zcm.length>0){
                    for(let i=0;i<res.data.zcm.length;i++){
                        labelsz.push(res.data.zcm[i].brand)
                    }
                }

                const option2 = {
                    title: {
                        text: '自产苗-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsz,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.zcm.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.zcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd2.setOption(option2);

                const chartd3 = echarts.init(document.getElementById("areayear3"+index));
                let labelsq = [];
                if(res.data.qt.length>0){
                    for(let i=0;i<res.data.qt.length;i++){
                        labelsq.push(res.data.qt[i].brand)
                    }
                }
                const option3 = {
                    title: {
                        text: '其他-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsq,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.qt.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.qcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd3.setOption(option3);
            })
        },
        getMonthProduct(){
            listXsbMonths().then(res =>{
                this.dicts = res.data.months;
                this.activeName1 = res.data.months[0].value;
                this.getMonthProductData(res.data.months[0].value,0);
            })
        },
        getMonthProductData(month,index){
            let data = {
                month: month
            }
            listMonthProductData(data).then(res =>{
                let labelsb = [];
                if(res.data.brand.length>0){
                    for(let i=0;i<res.data.brand.length;i++){
                        labelsb.push(res.data.brand[i].brand)
                    }
                }
                const chartd1 = echarts.init(document.getElementById("div1"+index));
                const option1 = {
                    title: {
                        text: '一级品类-接单情况',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsb,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.brand.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株<br/>成交单数："+item.orders+"单"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd1.setOption(option1);

                const chartd2 = echarts.init(document.getElementById("div2"+index));
                let labelsz = [];
                if(res.data.zcm.length>0){
                    for(let i=0;i<res.data.zcm.length;i++){
                        labelsz.push(res.data.zcm[i].brand)
                    }
                }

                const option2 = {
                    title: {
                        text: '自产苗-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsz,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.zcm.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd2.setOption(option2);

                const chartd3 = echarts.init(document.getElementById("div3"+index));
                let labelsq = [];
                if(res.data.qt.length>0){
                    for(let i=0;i<res.data.qt.length;i++){
                        labelsq.push(res.data.qt[i].brand)
                    }
                }
                const option3 = {
                    title: {
                        text: '其他-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsq,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.qt.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd3.setOption(option3);
            })
        },
        getYearProduct(){
            listYearProduct().then(res =>{
                let labelsb = [];
                if(res.data.brand.length>0){
                    for(let i=0;i<res.data.brand.length;i++){
                        labelsb.push(res.data.brand[i].name)
                    }
                }

                const chart2cp = echarts.init(this.$refs.chart2yearcp);
                const optioncp = {
                    title: {
                        text: '一级品类-接单情况',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsb,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.brand.map(item => ({
                                value: item.finished,
                                name: item.name,
                                extraInfo:"<span style='color:black;'>品类名称: "+item.name+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株<br/>成交单数："+item.orders+"单"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart2cp.setOption(optioncp);

                let labelsz = [];
                if(res.data.zcm.length>0){
                    for(let i=0;i<res.data.zcm.length;i++){
                        labelsz.push(res.data.zcm[i].bigname)
                    }
                }

                const chart2yearzcm = echarts.init(this.$refs.chart2yearzcm);
                const optionzcm = {
                    title: {
                        text: '自产苗-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsz,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.zcm.map(item => ({
                                value: item.finished,
                                name: item.bigname,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.bigname+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart2yearzcm.setOption(optionzcm);

                let labelsq = [];
                if(res.data.qt.length>0){
                    for(let i=0;i<res.data.qt.length;i++){
                        labelsq.push(res.data.qt[i].bigname)
                    }
                }
                const chart2yearqt = echarts.init(this.$refs.chart2yearqt);
                const optionqt = {
                    title: {
                        text: '其他-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsq,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.qt.map(item => ({
                                value: item.finished,
                                name: item.bigname,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.bigname+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart2yearqt.setOption(optionqt);

            })
        },
        getAreaYearTarget(){
            listAreaYearTarget().then(res =>{
                this.areayeartable = res.data.areayeartable;
                let labels = [];
                if(res.data.areayear.length>0){
                    for(let i=0;i<res.data.areayear.length;i++){
                        labels.push(res.data.areayear[i].area)
                    }
                }

                const chart = echarts.init(this.$refs.chartay);
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.areayear.map(item => ({
                                value: item.target,
                                name: item.area,
                                extraInfo:"<span style='color:black;'>片区: "+item.area+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br />冲刺目标: "+item.cctarget+"万元<br />冲刺达成率:"+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.areayear.map(item => ({
                                value: item.cctarget,
                                name: item.area,
                                extraInfo:"<span style='color:black;'>片区: "+item.area+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br />冲刺目标: "+item.cctarget+"万元<br />冲刺达成率:"+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'red' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.areayear.map(item => ({
                                value: item.htfinished,
                                name: item.area,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chart.setOption(option);
            })
        },
        getAreaTarget(){
            listAreasTarget().then(res =>{
                this.jnt = res.data.jnt;
                this.ylt = res.data.ylt;
                this.cgt = res.data.cgt;
                this.smt = res.data.smt;
                this.ant = res.data.ant;
                this.yxt = res.data.yxt;
                this.slt = res.data.slt;
                this.cxt = res.data.cxt;
                this.swt = res.data.swt;

                let labelssw = [];
                if(res.data.sw.length>0){
                    for(let i=0;i<res.data.sw.length;i++){
                        labelssw.push(res.data.sw[i].month)
                    }
                }

                const chartsw1 = echarts.init(this.$refs.chartsw1);
                const optionsw1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelssw,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.sw.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.sw.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.sw.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartsw1.setOption(optionsw1);

                const chartsw2 = echarts.init(this.$refs.chartsw2);
                const optionsw2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelssw,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.sw.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartsw2.setOption(optionsw2);

                let labelscx = [];
                if(res.data.cx.length>0){
                    for(let i=0;i<res.data.cx.length;i++){
                        labelscx.push(res.data.cx[i].month)
                    }
                }

                const chartcx1 = echarts.init(this.$refs.chartcx1);
                const optioncx1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelscx,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.cx.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.cx.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.cx.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartcx1.setOption(optioncx1);

                const chartcx2 = echarts.init(this.$refs.chartcx2);
                const optioncx2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelscx,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.cx.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartcx2.setOption(optioncx2);

                let labelssl = [];
                if(res.data.sl.length>0){
                    for(let i=0;i<res.data.sl.length;i++){
                        labelssl.push(res.data.sl[i].month)
                    }
                }

                const chartsl1 = echarts.init(this.$refs.chartsl1);
                const optionsl1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelssl,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.sl.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.sl.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.sl.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartsl1.setOption(optionsl1);

                const chartsl2 = echarts.init(this.$refs.chartsl2);
                const optionsl2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelssl,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.sl.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartsl2.setOption(optionsl2);

                let labelsyx = [];
                if(res.data.yx.length>0){
                    for(let i=0;i<res.data.yx.length;i++){
                        labelsyx.push(res.data.yx[i].month)
                    }
                }

                const chartyx1 = echarts.init(this.$refs.chartyx1);
                const optionyx1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsyx,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.yx.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.yx.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.yx.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartyx1.setOption(optionyx1);

                const chartyx2 = echarts.init(this.$refs.chartyx2);
                const optionyx2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsyx,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.yx.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartyx2.setOption(optionyx2);

                let labelsan = [];
                if(res.data.an.length>0){
                    for(let i=0;i<res.data.an.length;i++){
                        labelsan.push(res.data.an[i].month)
                    }
                }

                const chartan1 = echarts.init(this.$refs.chartan1);
                const optionan1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsan,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.an.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.an.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.an.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartan1.setOption(optionan1);

                const chartan2 = echarts.init(this.$refs.chartan2);
                const optionan2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsan,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.an.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartan2.setOption(optionan2);

                let labelssm = [];
                if(res.data.sm.length>0){
                    for(let i=0;i<res.data.sm.length;i++){
                        labelssm.push(res.data.sm[i].month)
                    }
                }

                const chartsm1 = echarts.init(this.$refs.chartsm1);
                const optionsm1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelssm,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.sm.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.sm.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.sm.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartsm1.setOption(optionsm1);

                const chartsm2 = echarts.init(this.$refs.chartsm2);
                const optionsm2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelssm,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.sm.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartsm2.setOption(optionsm2);

                let labelscg = [];
                if(res.data.cg.length>0){
                    for(let i=0;i<res.data.cg.length;i++){
                        labelscg.push(res.data.cg[i].month)
                    }
                }

                const chartcg1 = echarts.init(this.$refs.chartcg1);
                const optioncg1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelscg,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.cg.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.cg.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.cg.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartcg1.setOption(optioncg1);

                const chartcg2 = echarts.init(this.$refs.chartcg2);
                const optioncg2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelscg,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.cg.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartcg2.setOption(optioncg2);

                let labelsyl = [];
                if(res.data.yl.length>0){
                    for(let i=0;i<res.data.yl.length;i++){
                        labelsyl.push(res.data.yl[i].month)
                    }
                }
                const chartyl1 = echarts.init(this.$refs.chartyl1);
                const optionyl1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsyl,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.yl.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.yl.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.yl.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartyl1.setOption(optionyl1);

                const chartyl2 = echarts.init(this.$refs.chartyl2);
                const optionyl2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsyl,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.yl.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartyl2.setOption(optionyl2);

                let labelsjn = [];
                if(res.data.jn.length>0){
                    for(let i=0;i<res.data.jn.length;i++){
                        labelsjn.push(res.data.jn[i].month)
                    }
                }
                const chartjn1 = echarts.init(this.$refs.chartjn1);
                const optionjn1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标','冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsjn,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.jn.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                              color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.jn.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.jn.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartjn1.setOption(optionjn1);

                const chartjn2 = echarts.init(this.$refs.chartjn2);
                const optionjn2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsjn,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.jn.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            }
                        }
                    ]
                };
                chartjn2.setOption(optionjn2);
            })
        },
        getComDeptTarget(){
            listComDeptTarget().then(res =>{
                this.company = res.data.company;
                this.sdept = res.data.dept;
                this.deptmonthtable = res.data.deptmonthtable;
                let labels = [];
                if(res.data.deptmonth.length>0){
                    for(let i=0;i<res.data.deptmonth.length;i++){
                        labels.push(res.data.deptmonth[i].month)
                    }
                }
                const chart1 = echarts.init(this.$refs.chart1);
                const option1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标','冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.deptmonth.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br />冲刺目标："+item.cctarget+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br />冲刺达成率: "+item.ccrate+"%"
                            })),

                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.deptmonth.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br />冲刺目标："+item.cctarget+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br />冲刺达成率: "+item.ccrate+"%"
                            })),

                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.deptmonth.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart1.setOption(option1);

                const chart2 = echarts.init(this.$refs.chart2);
                const option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.deptmonth.map(item => ({
                                value: item.htrate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br />冲刺目标："+item.cctarget+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.htrate+"%<br />冲刺达成率: "+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                        }
                    ]
                };
                chart2.setOption(option2);
            })
        },
    }
}
</script>
